{template 'page_header'}
<script type="text/javascript" src="../addons/scene_cube/style/src/spuotlet_map.js?v=2014-05-21"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=359042E5AC9ced07c553ebe2042aad73"></script>
	<script type="text/javascript" src="../addons/scene_cube/style/src/spuotlet_map.js?v=2014-05-21"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=359042E5AC9ced07c553ebe2042aad73"></script>
    <div id="main">
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span12">

                    <div class="box">
                        <div class="box-title">
                            <div class="span12">
                                <h3><i class="icon-edit"></i>{if $id}修改{else}新增{/if}画面 <small>{$app['title']}</small></h3>
                            </div>
                        </div>
                        <form id="page_form" action="" method="post" class="form-horizontal form-validate">
                              <div class="box-content">
                                <div class="control-group">
                                    <label for="listorder" class="control-label">排序：</label>
                                    <div class="controls">
                                        <input type="text" name="listorder" id="listorder" class="input-medium" data-rule-required="true" data-rule-maxlength="50" value="{$item['listorder']}">
                                        <span class="maroon">*</span>
                                        <span class="help-inline">越大越靠前</span>
                                    </div>
                                </div>
                                <div class="js_scene_picture">
                                    <div class="control-group">
                                        <label for="m_type" class="control-label">画面样式：</label>
                                        <div class="controls">
                                            <select class="inpit-medium js_scene_style_select" name="m_type" data-rule-required="true">
                                                <option value="1" data-type="pure" {if $item['m_type']==1}selected{/if}>纯图片式</option>
                                                <option value="2" data-type="btn" {if $item['m_type']==2}selected{/if}>带链接图片式</option>
                                                <option value="3" data-type="share" {if $item['m_type']==3}selected{/if}>带分享图片式</option>
												<option value="7" data-type="tel" {if $item['m_type']==7}selected{/if}>带拨号图片式</option>
                                                <option value="4" data-type="video" {if $item['m_type']==4}selected{/if}>优酷视频</option>
												<option value="6" data-type="pics" {if $item['m_type']==6}selected{/if}>多图展示</option>
												<option value="31" data-type="maplink" {if $item['m_type']==31}selected{/if}>地图链接</option>
											</select>
                                        </div>
                                    </div>
									<div class="control-group alert js_scene_style js_pure hide">
									场景1：单一图片显示,建议大小640*1008,或者相同比例。(具体参考实例)
									</div>
									<div class="control-group alert alert-success js_scene_style js_btn hide">
									场景2：图片全屏显示,建议大小640*1008,或者相同比例。中下部有按钮图片实现连接(具体参考实例)
									</div>
									<div class="control-group alert alert-info js_scene_style js_share hide">
									场景3：图片全屏显示,建议大小640*1008,或者相同比例。中下部有按钮图片点击出现分享图片(具体参考实例)
									</div>
									<div class="control-group alert alert-error js_scene_style js_tel hide">
									场景4：图片全屏显示,建议大小640*1008,或者相同比例。实现一键拨号(具体参考实例)
									</div>
									<div class="control-group alert js_scene_style js_video hide">
									场景5：图片全屏显示,建议大小640*1008,或者相同比例。优酷视频播放(具体参考实例)
									</div> 
									<div class="control-group alert js_scene_style js_maplink hide">
									场景6：图片全屏显示,建议大小640*1008,或者相同比例。实现百度导航(具体参考实例)
									</div> 
									<div class="control-group alert js_scene_style js_pics hide">
									场景7：图片全屏显示,建议大小640*1008,或者相同比例。多图展示(具体参考实例)
									</div> 
                                    <div class="control-group">
                                        <label for="" class="control-label">画面内容：</label>
                                        <div class="controls">
                                            <!--纯图开始-->
                                            <div>
                                                <div id="pureimg_image_uploads" style="width:330px;">
                                                    {php echo tpl_form_field_image('thumb', $item['thumb'])}
                                                </div>
                                                <div class="help-inline">（建议尺寸:宽640像素,高960像素或等比图片）</div>
                                            </div>
                                            <!--纯图结束-->
                                            <!--按钮开始-->
                                            <div class="js_scene_style js_btn hide">
                                                <div class="margin-top10">
                                                    <div id="btn_img_image_uploads" style="width:330px;">
                                                        {php echo tpl_form_field_image('btn[btnimg]', $data['btnimg'])}
                                                    </div>
                                                </div>
                                                
                                            </div>
                                            <!--按钮结束-->
                                            <!--分享开始-->
                                            <div class="js_scene_style js_share hide">
                                                <div class="margin-top10">
                                                    <div id="btn_img_image_uploads" style="width:330px;">
                                                        {php echo tpl_form_field_image('share[btnimg]', $data['btnimg'])}
                                                    </div>
                                                </div>
                                            </div>
                                            <!--分享结束-->
											<!--电话按钮开始-->
                                            <div class="js_scene_style js_tel hide">
                                                <div class="margin-top10">
                                                    <div id="btn_img_image_uploads" style="width:330px;">
                                                        {php echo tpl_form_field_image('tel[btnimg]', $data['btnimg'])}
                                                    </div>
                                                </div>
                                            </div>
                                            <!--按钮结束-->
                                            <span class="help-block margin-top10"></span>
                                        </div>
                                    </div>
                                    <div class="control-group js_scene_style js_btn hide">
										<label for="" class="control-label">链接：</label>
                                        <div class="controls">
                                            <input type="text" class="input-xlarge" name="btn[url]" value="{$data['url']}" placeholder="请输入链接地址" data-rule-required="true" data-rule-url="true"/>
                                            <span class="help-block">链接地址：http://</span>
                                        </div>
									</div>
									<div class="control-group js_scene_style js_video hide">
																	  
										<label for="" class="control-label">视频链接：</label>
                                        <div class="controls">
                                            <input type="text" class="input-xlarge" name="video[url]" value="{$data['url']}" placeholder="请输入链接地址" data-rule-required="true" data-rule-url="true"/>
											<span class="help-block">形如：http://v.youku.com/v_show/id_XNzgzMTgyMzIw.html)</span>
										</div>
									</div>
									<div class="control-group js_scene_style js_tel hide">
										<label for="" class="control-label">电话：</label>
                                        <div class="controls">
                                            <input type="text" class="input-xlarge" name="tel[url]" value="{$data['url']}" placeholder="请输入电话号码" data-rule-required="true" data-rule-phone="true"/>
                                            <span class="help-block">请填写真实的电话号码</span>
                                        </div>
									</div>
									<div class="control-group js_scene_style js_maplink hide">
                                        <div class="control-group">
                                            <label for="" class="control-label">按钮图片：</label>
                                            <div class="margin-top10 controls">
                                                <div id="map_image_uploads" style="width:330px;">
                                                    {php echo tpl_form_field_image('maplink[btnimg]', $data['btnimg'])}
                                                </div>
                                            </div>
                                        </div>
										<div class="control-group">
											<label class="control-label" for="tel">电话号码</label>
											<div class="controls">
												<input type="text" id="tel" class="input-large" name="maplink[tel]" data-rule-phone="true" value="{$data['tel']}"/>
												<span class="maroon">*</span><span class="help-inline">(为空,不显示)</span>
											</div>
										</div>
										<div class="control-group">
											<label class="control-label" for="sname">名称</label>
											<div class="controls">
												<input type="text" id="sname" class="input-large" name="maplink[sname]" value="{$data['sname']}"/>
												<span class="maroon">*</span><span class="help-inline">(导航显示名称)</span>
											</div>
										</div>
										<div class="control-group">
											<label class="control-label" for="suggestId">经纬度</label>
											<div class="controls">
												<div class="input-append">
													<input type="text" id="suggestId" class="input-xlarge" name="maplink[place]" data-rule-required="true"  value="{$data['place']}"/>
													<button class="btn" type="button" id="positioning">搜索</button>
												</div>

												<span class="maroon">注意：这个只是模糊定位，准确位置请地图上标注!</span>
												<div id="l-map">
													<i class="icon-spinner icon-spin icon-large"></i>地图加载中...
												</div>
												<div id="r-result">
													<input type="hidden" id="lng" name="maplink[lng]" value="{$data['lng']}" /><input type="hidden" id="lat" name="maplink[lat]" value="{$data['lat']}"  />
												</div>
											</div>
										</div>
										 
									</div>

									 
								<div class="control-group js_scene_style js_pics hide">
								<label class="control-label">多图展示：</label>
								<div class="controls">
									<div class="span12" style="margin-bottom:10px">
                                        <a href="javascript:void(0)" class="btn" id="add_menu"><i class="icon-plus"></i>添加图片</a>
                                    </div>
									<table class="table table-bordered table-hover dataTable">

										<thead>
											<tr>
												<th style="border-bottom-width: 1px;">图片地址</th>
 												<th style="border-bottom-width: 1px;" class="norightborder">操作</th>
											</tr>
										</thead>
										<tbody id="listTable">
											{if empty($data['thumbs'])}
												<tr class="copy_rows">
													<td>
                                                        <div id="map_image_uploads" style="width:330px;">
                                                            {php echo tpl_form_field_image('pics[thumbs][]', $pics['mthumb'])}
                                                        </div>
                                                    </td>
													<td><a href="javascript:;" class="del">删除</a></td>
												</tr>
											{else}	
												{loop $data['thumbs'] $row} 
												<tr class="copy_rows">
												<td>
                                                    <div id="map_image_uploads" style="width:330px;">
                                                        {php echo tpl_form_field_image('pics[thumbs][]', $row)}
                                                    </div>
												</td>
												<td><a href="javascript:;" class="del">删除</a></td>
												</tr>
												{/loop}
											{/if}
										</tbody>
									</table>
								</div>
							</div>

                                    <div class="control-group js_scene_style js_share hide">
										<label for="" class="control-label">分享图片：</label>
                                        <div class="controls">
                                            <div id="share_image_uploads" style="width:330px;">
                                                {php echo tpl_form_field_image('share[share_thumb]', $data['share_thumb'])}
                                            </div>
										</div>
                                    </div>
                                </div>
                             
                                <div class="form-actions" style="margin-left:186px;">
                                    <button type="submit" class="btn btn-primary">保存</button>
                                    <button type="button" class="btn" onclick="window.history.go(-1)">取消</button>
                                </div>
                            </div>
                        </form>


                    </div>
                </div>
            </div>

        </div>
    </div>
    <script type="text/javascript">      
        $(function () {
            $(".js_scene_picture").each(function(){
                var type=$(this).find(".js_scene_style_select option:selected").data("type");
                $(this).find(".js_scene_style").addClass('hide');
                $(this).find(".js_"+type).removeClass('hide');
				if(type=='maplink'){
					{if !empty($data['lat'])&&!empty($data['lng'])}
					   var op = { 
							lat: {$data['lat']},
							lng: {$data['lng']},
							adr: "{$data['place']}"
						}
						baidu_map(op);
					{else}
						baidu_map();
					{/if}
				}
            });
            $(document).on("change",".js_scene_style_select",function(){
                var $p=$(this).parents(".js_scene_picture"),type=$(this).find("option:selected").data("type");
                $p.find(".js_scene_style").addClass('hide');
                $p.find(".js_"+type).removeClass('hide');
				if(type=='maplink'){
				   {if !empty($data['lat'])&&!empty($data['lng'])}
					   var op = { 
							lat: {$data['lat']},
							lng: {$data['lng']},
							adr: "{$data['place']}"
						}
						baidu_map(op);
					{else}
						baidu_map();
					{/if}
				}
            });
			
        });
        /*
		 KindEditor.ready(function(K){
			var editor = KindEditor.editorObj || K.editor({
				themeType: 'simple',
				allowFileManager: true,
				uploadJson : "./index.php?act=attachment&do=upload",
				fileManagerJson : "./index.php?act=attachment&do=manager",
			});

			$('.select_img').click(function(e){
				editor.loadPlugin('image', function(){
					editor.plugin.imageDialog({
						imageUrl: $(e.target).parent().prev().val(),
						clickFn: function(url, title, width, height, border, align){
							var val = url;
							if(url.toLowerCase().indexOf("http://") == -1 && url.toLowerCase().indexOf("https://") == -1) {
								var filename = /images(.*)/.exec(url);
								if(filename && filename[0]) {
									val = filename[0];
								}
							}
							$(e.target).parent().prev().val(val);
							
							if('image-single' == $(e.target).parent().prev().prev().attr('upload')){
								$(e.target).parent().prev().prev().attr('src', url);
								$(e.target).parent().prev().prev().attr('alt', url)
							}

							editor.hideDialog();
						}
					});
				});
			});		
		}); */
		window.document.onkeydown = function(e) {
			if ('BODY' == event.target.tagName.toUpperCase()) {
				var e=e || event;
　 				var currKey=e.keyCode || e.which || e.charCode;
				if (8 == currKey) {
					return false;
				}
			}
		};
		//页面事件监听
		$(document).ready(function(){
			//新增门店实景
			$("#add_menu").click(function(){
				$('.copy_rows:first').clone(true).appendTo('#listTable').find('input[type=text]').val('');
				$('.copy_rows:last').find('img').attr({src:'',alt:'',title:''});
				//$('.copy_rows:last').find('script').remove();
			});
			
			//删除门店实景
			$("#listTable .del").click(function () {
					var removeObj = $(this).parent('td').parent('tr');
					var className = removeObj.attr('class');
					if($("." + className).length <= 1){
						removeObj.find('img').attr("src","");
						return removeObj.find('input[type=text],input[type=hidden]').val('');
						
					}
					return removeObj.remove();
				
			});
		});
	

	</script>
{template 'common/footer'}